import type { IPost } from '@/interfaces';
import Image from 'next/image';
import type { TMetadata } from '@/types';
import PostCover from '@/app/[locale]/common/post/cover';

export default function PostImages({
  item,
  metadata,
}: {
  item: IPost;
  metadata: TMetadata;
}) {
  const { images } = item;
  const env = metadata.env;

  return (
    <>
      {images.length > 0 && (
        <div className="d-flex gap-2 overflow-x-auto flex-nowrap text-nowrap pb-2">
          <PostCover item={item} metadata={metadata} />

          {images.map((value, index) => {
            return (
              <div
                key={value}
                className="ratio ratio-16x9 flex-shrink-0"
                style={{ width: 260, height: 195 }}
              >
                <Image
                  className="rounded object-fit-contain"
                  width={260}
                  height={195}
                  src={value}
                  placeholder="blur"
                  blurDataURL={env.APP_BLUR_DATA_URL}
                  alt={`grid${index + 1}`}
                />
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}
